<template>
  <div class="sheep-add-container">
    <el-card class="add-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon class="header-icon"><User /></el-icon>
          <span class="header-title">新增种公羊</span>
        </div>
      </template>

      <el-form 
        ref="formRef" 
        :model="formData" 
        :rules="formRules" 
        label-width="120px"
        class="add-form"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="可视耳号" prop="earNumber">
              <el-input 
                v-model="formData.earNumber" 
                placeholder="请输入可视耳号"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电子耳号" prop="elEarNumber">
              <el-input 
                v-model="formData.elEarNumber" 
                placeholder="请输入电子耳号"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="品种" prop="breed">
              <el-select 
                v-model="formData.breed" 
                placeholder="请选择品种"
                style="width: 100%"
              >
                <el-option label="澳洲白" value="澳洲白" />
                <el-option label="杜泊" value="杜泊" />
                <el-option label="萨福克" value="萨福克" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="formData.gender">
                <el-radio label="公">公</el-radio>
                <el-radio label="母">母</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="出生日期" prop="birthDate">
              <el-date-picker
                v-model="formData.birthDate"
                type="date"
                placeholder="选择出生日期"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="栋舍" prop="shed">
              <el-select 
                v-model="formData.shed" 
                placeholder="请选择栋舍"
                style="width: 100%"
              >
                <el-option label="普通栋舍" value="普通栋舍" />
                <el-option label="种公栋舍" value="种公栋舍" />
                <el-option label="种母栋舍" value="种母栋舍" />
                <el-option label="后备栋舍" value="后备栋舍" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="栏位" prop="pen">
              <el-input 
                v-model="formData.pen" 
                placeholder="请输入栏位号"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="type">
              <el-select 
                v-model="formData.type" 
                placeholder="请选择类型"
                style="width: 100%"
              >
                <el-option label="种公" value="种公" />
                <el-option label="种母" value="种母" />
                <el-option label="后裔" value="后裔" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input 
                v-model="formData.remark" 
                type="textarea" 
                :rows="3"
                placeholder="请输入备注信息"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item class="form-actions">
          <el-button type="primary" @click="handleSubmit" :loading="loading">
            <el-icon><Check /></el-icon>
            保存
          </el-button>
          <el-button @click="handleCancel">
            <el-icon><Close /></el-icon>
            取消
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { User, Check, Close } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'

const router = useRouter()
const formRef = ref<FormInstance>()
const loading = ref(false)

// 表单数据
const formData = reactive({
  earNumber: '',
  elEarNumber: '',
  breed: '',
  gender: '公',
  birthDate: '',
  shed: '',
  pen: '',
  type: '种公',
  remark: ''
})

// 表单验证规则
const formRules: FormRules = {
  earNumber: [
    { required: true, message: '请输入可视耳号', trigger: 'blur' }
  ],
  elEarNumber: [
    { required: true, message: '请输入电子耳号', trigger: 'blur' }
  ],
  breed: [
    { required: true, message: '请选择品种', trigger: 'change' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  birthDate: [
    { required: true, message: '请选择出生日期', trigger: 'change' }
  ],
  shed: [
    { required: true, message: '请选择栋舍', trigger: 'change' }
  ],
  type: [
    { required: true, message: '请选择类型', trigger: 'change' }
  ]
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    loading.value = true
    
    // TODO: 调用API保存数据
    console.log('提交的数据:', formData)
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    ElMessage.success('种公羊添加成功')
    router.push('/SheepFilesList')
  } catch (error) {
    console.error('表单验证失败:', error)
    ElMessage.error('请检查表单信息')
  } finally {
    loading.value = false
  }
}

// 取消操作
const handleCancel = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要取消添加吗？未保存的数据将丢失。',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    router.push('/SheepFilesList')
  } catch {
    // 用户取消操作
  }
}
</script>

<style scoped>
.sheep-add-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.add-card {
  max-width: 800px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-icon {
  font-size: 20px;
  color: #409EFF;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.add-form {
  margin-top: 20px;
}

.form-actions {
  margin-top: 30px;
  text-align: center;
}

.form-actions .el-button {
  margin: 0 10px;
  padding: 12px 24px;
}

.form-actions .el-button .el-icon {
  margin-right: 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sheep-add-container {
    padding: 10px;
  }
  
  .add-card {
    margin: 0;
  }
  
  .form-actions .el-button {
    margin: 5px;
    width: 100%;
  }
}
</style>
